<template>
  <v-chart class="bar" :option="option" />
</template>

<script>
import { use } from "echarts/core";

import {
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";

import { BarChart } from "echarts/charts";

import { CanvasRenderer } from "echarts/renderers";

use([
  DatasetComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  CanvasRenderer,
]);

import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineComponent } from "vue";

export default defineComponent({
  name: "Bar",
  components: {
    VChart,
  },
  provide: {
    [THEME_KEY]: "dark",
  },
  setup: () => {
    const option = ref({
      legend: {
        top: "0%",
        left: "center",
        textStyle: {
          //图例文字的样式
          color: "#ccc",
          fontSize: 14,
        },
      },
      tooltip: {},
      dataset: {
        source: [
          ["product", "系列1", "系列2", "系列3"],
          ["A1", 200, 100, 200],
          ["A2", 30, 118, 100],
          ["B1", 180, 90, 170],
          ["B2", 95, 55, 65],
          ["C1", 238, 170, 295],
          ["C2", 420, 180, 400],
        ],
      },
      xAxis: {
        type: "category",
        axisLabel: {
          interval: 0,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
        },
      },
      yAxis: {
        axisLine: {
          show: true,
        },
      },
      grid:{
        x:"8%",
        y:"18%",
        width:"90%",
        height:"72%"
      },
      series: [
        {
          type: "bar",
          itemStyle: {
            normal: {
              color: "#0A6FF5",
            },
          },
        },
        {
          type: "bar",
          itemStyle: {
            normal: {
              color: "#3BA4F5",
            },
          },
        },
        {
          type: "bar",
          itemStyle: {
            normal: {
              color: "#54C5F5",
            },
          },
        },
      ],
      backgroundColor: "transparent",
    });

    return { option };
  },
});
</script>

<style lang="less" scoped>
.bar {
  width: 100%;
  height: 100%;
}
</style>
